// 下拉多选
var multipleselect = Vue.extend({
template:'<div class="multiple-select"><div @click="toggleDown()"><div v-if="miltipleselectedshow.length == 0" style="color:#757575">{{placeholder}}</div><span v-for="(item,index) in miltipleselectedshow" class="multiple-selected">{{item}}<span class="multiple-selected-icon" @click="multipleDelete(index)">X</span></span></div><div class="multiple-select-down" v-if="isShowMultipleDown"><div v-for="(item,index) in miltipleselectlist" class="multiple-select-item" @click="chooseSelect(index,this)">{{item[lable]}}</div></div></div>',
	data () {
		return {
			miltipleselectedshow:[], // 展示选中的数组
			miltipleselected:[], // 选中的值
			isShowMultipleDown:false,
		}
	},
	props : {
		placeholder:'', // 提示语
		miltipleselectlist:Array, // 多选选项 
		lable:'', // 展示字段
		value:[String, Number], // 值字段
		disabled:Boolean, // 是否禁用
	},
	methods: {
		toggleDown () {
			if (!this.disabled) {
				if (this.isShowMultipleDown) {
					this.isShowMultipleDown = false
					$('.multiple-select-item').removeClass('on')
				} else {
					this.isShowMultipleDown = true
					$('.multiple-select-item').removeClass('on')
					let _this = this
					setTimeout(function() {
						let itemList = $('.multiple-select-item')
						for (let val of _this.miltipleselected) {
							for (let a = 0; a < _this.miltipleselectlist.length; a++) {
								if (_this.miltipleselectlist[a][_this.value] == val) {
									$(itemList[a]).addClass('on')
								}
							}
						}
					}, 100);
				}
			} else {
				return
			}
		},
		// 
		chooseSelect (e,el) {
			let list = $('.multiple-select-item')
			if (!$(list[e]).hasClass('on')) {
				$(list[e]).addClass('on');
				this.miltipleselectedshow.push(this.miltipleselectlist[e][this.lable]);
				this.miltipleselected.push(this.miltipleselectlist[e][this.value]);
			} else {
				$(list[e]).removeClass('on');
				for (let a=0; a < this.miltipleselected.length; a++) {
					if (this.miltipleselectlist[e][this.value] == this.miltipleselected[a]) {
						this.miltipleselected.splice(a,1)
						this.miltipleselectedshow.splice(a,1)
						return
					}
				}
			}
		},
		multipleDelete (index) {
			this.isShowMultipleDown = true
			this.miltipleselected.splice(index,1)
			this.miltipleselectedshow.splice(index,1)
			for (let a=0; a < this.miltipleselectlist.length; a++) {
				if (this.miltipleselectlist[a][this.value] == this.miltipleselected[index]) {
					let list = $('.multiple-select-item')
					$(list[a]).removeClass('on')
				}
			}
		}
	},
})
// $(document).bind('click',function(e){
// 	let obj = $(e.target)
// 	if (obj.closest('.multiple-select').length == 0) {
// 		$('.multiple-select-item').removeClass('on')
// 		$('.multiple-select-down').css('display','none')
// 	}
// })
